<template>
  <k-view class="container">
    <k-image
      class="page-top-banner"
      src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/37ca1b2c-5448-42f1-ac8e-be6c86fe5446.png"
    ></k-image>
    <k-view class="content">
      <head-intro title="什么是上市公司健康指数？">
        <template v-slot:content>
          <k-text class="head-intro-text">{{ headtext1 }}</k-text>
        </template>
      </head-intro>
      <content-area />
    </k-view>
    <k-view class="content">
      <head-intro title="上市公司健康指数有用吗？">
        <template v-slot:interestIndex>
          <k-view class="interest-index">
            <k-view class="interest-title">
              <k-view
                v-for="(item, index) in interestIndexTitle"
                :key="index"
                class="interest-title-item"
                >{{ item }}</k-view
              >
            </k-view>
            <k-view class="interest-rate">
              <k-view
                v-for="(item, index) in interestIndexRate"
                :key="index"
                :class="['interest-rate-item num-j-r', formatNum(item).colorClass + '-font']"
              >
                {{ formatNum(item).signStr }}</k-view
              >
            </k-view>
          </k-view>
        </template>
        <template v-slot:image>
          <base-line
            :chartData="chartData"
            :unit="'%'"
            mainLineKey="策略收益"
            :themeType="'mobile-app-' + theme"
          ></base-line>
        </template>
        <template v-slot:TextClamp>
          <TextClamp />
        </template>
      </head-intro>
    </k-view>
    <k-view class="content">
      <head-intro title="上市公司健康指数如何得出？">
        <template v-slot:content>
          <k-text class="head-intro-text">{{ headtext2 }}</k-text>
        </template>
        <template v-slot:image>
          <k-view class="bottom-image-wrapper">
            <k-image
              src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/b2bb4ac2-c1b3-4893-ba90-ee2c16c2f1b8.png"
              class="bottom-image"
            />
          </k-view>
        </template>
      </head-intro>
    </k-view>
    <page-footer />
  </k-view>
</template>

<script>
import Apis from '@king-fisher/apis';
import { formatNumber, setCookie } from '@/utils';
import HeadIntro from '@/components/Intro/HeadIntro.vue';
import TextClamp from '@/components/Intro/TextClamp.vue';
import ContentArea from '@/components/Intro/ContentArea.vue';
import pageFooter from '@/components/Home/pageFooter.vue';
import { getBackTesting } from '@/apis';
import { sendPageStat } from '@/utils/stat';
import { PAGEID } from '@/config/stat';
import themeMixin from '../../mixins/themeMixin';
const { Toast } = Apis;
const chartData = {
  x: [],
  y: {
    策略收益: [],
    沪深300: [],
  },
};
const interestIndexRate = [];
export default {
  components: {
    HeadIntro,
    TextClamp,
    ContentArea,
    pageFooter,
  },
  data() {
    return {
      headtext1:
        '上市公司健康指数是在全面推行注册制的背景下，响应国家关于提高上市公司质量的要求，基于生命系统理论的质量综合评价体系。指数涵盖九大系统，数十个细分维度，四百余条底层指标，旨在帮助广大市场参与者甄别优质公司，优化投资决策，辅助分类监管，有助于上市公司开展发展质量自检，对问题、风险和不确定性做到做到早发现、早预防、早干预、早治疗，实现公司的可持续高质量发展。',
      headtext2:
        '《中国上市公司健康指数》是中关村国睿金融与产业发展研究会响应国务院《关于进一步提高上市公司质量的意见》以及最新颁布的一系列监管新规、政策文件等精神要求，以同花顺大数据为基础，采用人工智能等前沿信息技术，汇集专家力量，从年度、省际、地区、国有与非国有、重点产业链等不同维度系统、全面地分析我国上市公司发展呈现的各类差异。评价体系包含四十余项二级指标以及四百余条三级指标，多指标根据专家赋予评价标准以及权重后计算得到九大维度评分以及综合指数；',
      dialogContent: {
        title: '异常解读',
        content:
          '未抓取到公司党委书记与董事长两职合一。建议公司考虑党政一把手两职合一，落实党委把方向、管大局、保落实的核心作用，更好体现新时代公司治理新特征。',
        confirmText: '知道了',
      },
      interestIndexTitle: ['策略收益', '沪深300', '超额收益', '年化收益'],
      interestIndexRate: interestIndexRate,
      chartData: chartData,
    };
  },
  mixins: [themeMixin],
  methods: {
    formatNum(num) {
      return formatNumber(num);
    },
    handleTap() {
      Toast.show('handleTap');
    },
    async getBackTestingInfo() {
      const res = await getBackTesting();
      if (res.status_code !== 0) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      }
      const info = this.createChartData(res.data);
      const statistcs = this.createInterestIndexRate(res.data);
      this.chartData = info;
      this.interestIndexRate = statistcs;
    },
    createChartData(info) {
      const dataIncome = [];
      const dataHushen = [];
      if (info && info.profitrate) {
        const dataX = Object.keys(info.profitrate);
        Object.values(info.profitrate).forEach(element => {
          dataIncome.push((element.algo_profit * 100).toFixed(2));
          dataHushen.push((element.benchmark_profit * 100).toFixed(2));
        });
        return {
          x: dataX,
          y: {
            策略收益: dataIncome,
            沪深300: dataHushen,
          },
        };
      } else {
        return {
          x: [],
          y: {
            策略收益: dataIncome,
            沪深300: dataHushen,
          },
        };
      }
    },
    createInterestIndexRate(info) {
      const listData = [];
      if (info && info.performance) {
        const superData =
          Number(
            ((1 + info.performance.yield) / (1 + info.performance.benchmark_yield)).toFixed(2)
          ) - 1;
        listData.push(this.formartChgData(info.performance.yield));
        listData.push(this.formartChgData(info.performance.benchmark_yield));
        listData.push(this.formartChgData(superData));
        listData.push(this.formartChgData(info.performance.annual_yield));
      }
      return listData;
    },
    formartChgData(num) {
      return num ? `${num >= 0 ? '' : '-'}${(num * 100).toFixed(2)}%` : '-';
    },
  },
  mounted() {
    setCookie().then(id => {
      sessionStorage.setItem('userIdKey', id);
      sendPageStat(`${PAGEID.INTRO}`);
    });
    this.getBackTestingInfo();
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f5f5f5;
  .page-top-banner {
    width: 100%;
    height: 100%;
  }
  .content {
    margin: 8px 0px;
    width: calc(100vw - 24px);
    padding: 20px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    .head-intro-text {
      padding: 20px;
      margin-top: 20px;
      font-family: PingFangSC-Regular;
      border-radius: 8px;
      font-size: 28px;
      color: #595959;
      background: #fafafa;
      letter-spacing: 0;
      line-height: 48px;
      font-weight: 400;
    }
    .interest-index {
      background: #f5f5f5;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 116px;
      margin: 32px 0 24px 0;
      .interest-title {
        font-size: 26px;
        color: #595959;
        font-weight: 400;
        display: flex;
        justify-content: space-between;
        height: 36px;
        margin-bottom: 4px;
        .interest-title-item {
          flex: 1 0 25%;
        }
      }
      .interest-rate {
        font-family: THSJinRongTi-Medium;
        font-size: 32px;
        color: #ff2436;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        height: 44px;
        .interest-rate-item {
          flex: 1 0 25%;
        }
      }
    }
  }

  .bottom-image-wrapper {
    height: 260px;
    display: block;
    margin: 0 auto;
    background: #fafafa;
    .bottom-image {
      width: 630px;
    }
  }
  .text-clamp {
    width: 100%;
    line-height: 48px;
    max-height: 96px;
  }
  .chart {
    height: 404px;
    width: 100%;
  }
}

[theme-mode='black'] {
  .container {
    background: #0f0f0f;
    .content {
      background: #1c1c1c;

      .head-intro-text {
        color: rgba(255, 255, 255, 0.6);
        background: #1c1c1c;
      }
      .interest-index {
        background: #212121;

        .interest-title {
          color: rgba(255, 255, 255, 0.6);
        }
        .interest-rate {
          color: #ff2436;
        }
      }
    }

    .bottom-image-wrapper {
      background: #1c1c1c;
    }
  }
}
</style>
